<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 800px;
            border: 1px solid #111;
            display: flex;
            margin: 20px auto;
        }
        .left,.right{
            width: 400px;
        }
        .left{
            border-right:1px solid #111 ;
            position: relative;
        }
        .top .content{
            /* position: absolute; */
            display: none
        }
        .top .show{
            display:block;
        }
        .shadow{
            width: 200px;
            height: 200px;
            background-color: rgba(0,0,0,.7);
            position: absolute;
            display: none;
        }
        /* .bottom .img{
            width: ;
        } */
        .top img{
            width: 400px;
            height: 400px;
        }
        .bottom{
            height: 80px;
            display: flex;
        }
        .bottom .title{
            width: 70px;
            height: 70px;
            border: 5px solid #fff;
        }
        .bottom .active{
            border: 5px solid orange;
        }
        .bottom .title{
            width: 70px;
            height: 70px;
        }
        .bottom img{
            width: 70px;
            height: 70px;
        }
        .right{
            width: 400px;
            height: 400px;
            overflow: hidden;
            position: relative;
            display: none;
        }
        .right img{
            width: 800px;
            height: 800px;
            position:absolute;
            display: none;
        }
        .right .show{
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <div class="top">
                <div class="shadow"></div>
                <div class="content show"><img src="./imgs/1.jpg" alt=""></div>
                <div class="content"><img src="./imgs/2.jpg" alt=""></div>
                <div class="content"><img src="./imgs/3.jpg" alt=""></div>
                <div class="content"><img src="./imgs/4.jpg" alt=""></div>
                <div class="content"><img src="./imgs/5.jpg" alt=""></div>
            </div>
            <div class="bottom">
                <div class="title active"><img src="./imgs/1.jpg" alt=""></div>
                <div class="title"><img src="./imgs/2.jpg" alt=""></div>
                <div class="title"><img src="./imgs/3.jpg" alt=""></div>
                <div class="title"><img src="./imgs/4.jpg" alt=""></div>
                <div class="title"><img src="./imgs/5.jpg" alt=""></div>
            </div>
        </div>
        <div class="right">
            <img  class="show" src="./imgs/1.jpg" alt=""> 
            <img src="./imgs/2.jpg" alt=""> 
            <img src="./imgs/3.jpg" alt=""> 
            <img src="./imgs/4.jpg" alt=""> 
            <img src="./imgs/5.jpg" alt=""> 
        </div>
    </div>
</body>
<script>
    function $(ele){
        let e = null;
        if(ele.charAt(0) ==="#"){
            e = document.querySelector(ele)
        }else{
            e = document.querySelectorAll(ele)
        }
        return e
    }
// tab选项卡的切换
    // 为所有的title绑定索引
    let imgs = $(".title img")
    for( let i=0;i<imgs.length;i++ ){
        imgs[i].index = i
    }
// 点击切换
    $(".bottom")[0].addEventListener("click",function(e){
        // console.log(e.target,e.target.index);
        if(e.target.nodeName.toLowerCase()!=="img")return
        // 清除所有特殊类
        for(let i=0;i<$(".title").length;i++){
            $(".title")[i].className = "title"
            $(".content")[i].className = "content"
            $(".right img")[i].className = ""
        }   
        // title自己添加active类
        e.target.parentNode.className = "title active"
        $(".content")[e.target.index].className = "content show"
        $(".right img") [e.target.index].className ="show"
    },false)
// 鼠标移入top显示隐藏
    $(".top")[0].onmouseenter = function(){
        // 显示shoadow
        $(".shadow")[0].style.display = "block";
        $(".right")[0].style.display = "block";
    // 鼠标在top中移动时
    $(".top")[0].onmousemove=function(e){
        let x = e.clientX-100-$(".top")[0].offsetLeft
        x = x<0? 0:x
        x = x>200? 200:x

        let y = e.clientY-100-$(".top")[0].offsetTop
        y = y<0? 0:y
        y =y>200? 200:y

        $(".shadow")[0].style.left = x+"px"
        $(".shadow")[0].style.top = y+"px"

        for( let i=0;i<$(".right img").length;i++ ){
            $(".right img")[i].style.left = -x*2 +"px"
            $(".right img")[i].style.top = -y*2 +"px"
        }
    }
    }
    $(".top")[0].onmouseleave = function(){
        // 显示shoadow
        $(".shadow")[0].style.display = "none";
        $(".right")[0].style.display = "none";
    }
</script>
</html>